<template>
  <view :class="['MatchOperator', isShow ? ' active' : '']">
    <view class="icon" @click="isShow = !isShow"></view>
    <view class="title">匹配模式</view>
    <van-switch
      :checked="isCheck"
      @change="changeStatus"
      :size="20"
      active-color="#05A47D"
      inactive-color="#eee"
      class="switch"
    />
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "MatchOperator",
  data() {
    return {
      isCheck: false,
      isShow: false,
    };
  },
  computed: { ...mapState(["userInfo"]) },

  methods: {
    // 改变switch状态
    changeStatus(e) {
      if (e.detail && !this.userInfo.tags.length) {
        uni.showToast({
          icon: "error",
          title: "请先设置标签",
        });
        return;
      }
      this.isCheck = e.detail;
      this.isShow = !this.isShow;

      this.$emit("changeSwitchStatus", e.detail);
    },
  },
};
</script>

<style lang="scss" scoped>
.MatchOperator {
  width: 350rpx;
  height: 70rpx;
  position: fixed;
  z-index: 999;
  right: -285rpx;
  bottom: 170rpx;
  background-color: #fff;
  border-top-left-radius: 70rpx;
  border-bottom-left-radius: 70rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all 0.3s;
  .icon {
    width: 70rpx;
    height: 70rpx;
    background-color: #05a47d;
    margin-right: 20rpx;
  }

  .title {
    margin-right: 15rpx;
  }
  .switch {
    margin-top: 10rpx;
  }
}
.MatchOperator.active {
  right: -20rpx;
}
</style>
